<template>
  <div class="app-container full-height">
    <l-map
      :center="center"
      :options="options"
      :zoom="zoom"
      @update:center="centerUpdate"
      @update:zoom="zoomUpdate"
    >
      <l-tile-layer v-for="(item, index) in urls" :key="index" :url="item" />
      <l-control>
        <map-tools
          @showControl="showControl"
          @showLog="showLog"
          @showPartition="showPartition"
          @showPolicy="showPolicy"
        />
      </l-control>
    </l-map>
    <el-drawer
      :direction="directionL"
      :size="600"
      title=""
      :visible.sync="drawerL"
    >
      <div class="pl12 pr12">
        <div class="l-t">
          <el-divider content-position="left">
            <span class="color-primary">历史分区</span>
          </el-divider>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              align="center"
              label="时间"
              prop="date"
              width="90"
            />
            <el-table-column
              align="center"
              label="分区类型"
              prop="name"
              width="240"
            />
            <el-table-column align="center" label="生育期" prop="growth" />
            <el-table-column
              align="center"
              label="当前生效"
              prop="status"
              width="80"
            >
              <template #default="{ row }">
                <el-tag v-if="row.status" size="mini" type="success">是</el-tag>
                <el-tag v-else size="mini" type="danger">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" label="叠加">
              <template #default="{ row }">
                <el-switch
                  v-model="row.merge"
                  :active-value="1"
                  :inactive-value="0"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="h24"></div>
        <div class="l-b">
          <el-divider content-position="left">
            <span class="color-primary">灌溉季日志</span>
          </el-divider>
          <div class="census">
            <el-calendar>
              <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
              <template slot="dateCell" slot-scope="{ data }">
                <div @click="showDetail(data)">
                  <p :class="data.isSelected ? 'is-selected' : ''">
                    {{ data.day.split('-').slice(1).join('-') }}
                    <span
                      v-if="data.day.split('-').slice(1).join('-') === '07-04'"
                    >
                      ✔️
                    </span>
                  </p>
                  <div class="d-flex mt8">
                    <el-tag
                      v-if="
                        ['07-01', '07-02'].includes(
                          data.day.split('-').slice(1).join('-')
                        )
                      "
                      class="ml0"
                      size="mini"
                    >
                      需
                    </el-tag>
                    <el-tag
                      v-if="
                        ['07-02', '07-04'].includes(
                          data.day.split('-').slice(1).join('-')
                        )
                      "
                      class="ml0"
                      size="mini"
                      type="success"
                    >
                      灌
                    </el-tag>
                    <el-tag
                      v-if="
                        ['07-01', '07-03'].includes(
                          data.day.split('-').slice(1).join('-')
                        )
                      "
                      class="ml0"
                      size="mini"
                      type="warning"
                    >
                      雨
                    </el-tag>
                  </div>
                </div>
              </template>
            </el-calendar>
          </div>
        </div>
      </div>
    </el-drawer>
    <el-drawer
      :direction="directionR"
      :size="600"
      title="决策信息"
      :visible.sync="drawerR"
    >
      <div class="pl12 pr12">
        <div class="r-t">
          <div class="tip d-flex align-items-center m12">
            <span>生育期选择：</span>
            <el-select
              v-model="cropGrowth"
              clearable
              filterable
              placeholder="选择生育期"
            >
              <el-option
                v-for="item in cropGrowthes"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="h12"></div>
          <el-divider content-position="left">
            <span class="color-primary">逐日数据</span>
          </el-divider>
          <div class="census">
            <img alt="" src="http://api.zesi.com.cn/storage/policy/daily.png" />
          </div>
        </div>
        <div class="r-b">
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="气象数据" name="first">
              <img
                alt=""
                src="http://api.zesi.com.cn/storage/policy/qxz.png"
                style="width: 574px"
              />
            </el-tab-pane>
            <el-tab-pane label="墒情数据" name="second">
              <img
                alt=""
                src="http://api.zesi.com.cn/storage/policy/sqz.png"
                style="width: 574px"
              />
            </el-tab-pane>
            <el-tab-pane label="作物生长数据" name="third">
              <img
                alt=""
                src="http://api.zesi.com.cn/storage/policy/crop.png"
                style="width: 574px"
              />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-drawer>
    <detail ref="detail" />
  </div>
</template>

<script>
  import { map } from '@/utils/constant'
  import Detail from './components/detail'
  import MapTools from './components/map-tools'
  export default {
    components: {
      Detail,
      MapTools,
    },
    data() {
      return {
        drawerL: false,
        directionL: 'ltr',
        drawerR: false,
        directionR: 'rtl',
        width: '600',
        activeName: 'first',
        zoom: map.zoom,
        center: map.center,
        options: map.options,
        urls: map.mapTypes[map.initType],
        cropGrowth: '',
        cropGrowthes: [
          {
            id: 1,
            name: '生育初期',
          },
          {
            id: 2,
            name: '快速生长期',
          },
        ],
        tableData: [
          {
            date: '2016-05-02',
            name: 'AWC分区',
            status: 0,
            growth: '生育期1',
          },
          {
            date: '2016-05-04',
            name: '喷灌机机载式红外温度传感器系统',
            status: 0,
            growth: '生育期2',
          },
          {
            date: '2016-05-01',
            name: '无人机热成像系统',
            status: 0,
            growth: '生育期3',
          },
          {
            date: '2016-05-03',
            name: '无人机热成像和多光谱系统',
            status: 1,
            growth: '生育期4',
          },
        ],
      }
    },
    methods: {
      zoomUpdate(zoom) {
        this.zoom = zoom
      },
      centerUpdate(center) {
        this.center = center
      },
      showDetail(data) {
        this.$refs.detail.show(data)
      },
      showControl() {
        this.$baseMessage('设备控制', 'success')
      },
      showPolicy() {
        this.drawerR = true
      },
      showLog() {
        this.drawerL = true
      },
      showPartition() {
        this.$baseMessage('手动分区管理', 'success')
      },
    },
  }
</script>

<style lang="scss">
  .leaflet-control-attribution {
    display: none;
  }
  .full-height {
    height: calc(100vh - #{$base-nav-height} - #{$base-padding} * 4);
  }
  .el-calendar__body {
    padding: 0 !important;
  }
  .el-calendar-table .el-calendar-day {
    height: 64px;
    padding: 8px 6px;
  }
</style>
